<script setup lang="ts">
import type { TabPaneName } from 'element-plus';
import { ref } from 'vue';

// 默认显示 name="xxx" 的标签页内容
let activeName = ref('User')

const handleTabClick = (item: Object) => {
    console.log('点击了tag', item);
}
const handleTabChange = (name: TabPaneName) => {
    console.log(`切换到了${name}标签页`);
}
const handleTabRemove = (name: TabPaneName) => {
    console.log(`关闭了${name}标签页`);
}



</script>

<template>
    <el-main class="main_content">
        <el-scrollbar height="100%" :always="true">
            <div class="tabs_view">
                <el-tabs v-model="activeName" class="tabs" closable @tab-click="handleTabClick"
                    @tab-change="handleTabChange" @tab-remove="handleTabRemove">
                    <el-tab-pane label="User" name="User" class="el-tabs__content">User</el-tab-pane>
                    <el-tab-pane label="Config" name="Config" class="el-tabs__content">Config</el-tab-pane>
                </el-tabs>
            </div>
        </el-scrollbar>
    </el-main>
</template>

<style lang="scss" scoped>
.main_content {
    position: fixed;
    top: 68px;
    left: 13.55%;
    background-color: rgb(203, 213, 213);
    color: #000;
    z-index: 9;
    width: 88%;
    height: 90%;

    .tabs_view {
        padding: 6px 19px 6px 10px;
        background-color: #f5f7f9;
        width: 100%;
        margin: 0;

        .tabs .el-tab-pane {
            padding: 32px;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;
        }
    }


}
</style>
